<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>回访信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/echarts/jquery-3.4.1.min.js"></script>
</head>

<!--头部工具栏-->&nbsp;
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn-normal layui-btn-xs" lay-event="addVisit">添加回访信息</button>
        <button type="button" class="layui-btn-normal layui-btn-xs" id="test1" lay-event="addExcel" >导入Excel</button>&nbsp;
        <button type="button" class="layui-btn-normal layui-btn-xs" id="test2" lay-event="downExcel" >导出Excel</button>
    </div>
</script>
<!--行工具栏-->
<script type="text/html" id="barDemo" lay-event="toolbar">
    <a class="layui-btn-normal layui-btn-xs" lay-event="editVisit">修改</a>
</script>
<!--添加表单-->
<form class="layui-form" action="" id="addVisitForm" style="display: none;margin-right: 40px;margin-top: 20px">
    <!--创建人-->
    <input hidden th:value="${session.username}" name="createBy">
    <div class="layui-form-item">
        <label class="layui-form-label">客户ID</label>
        <div class="layui-input-inline">
            <input type="number" name="customId" id="addCustomTableSelect" readonly
                   lay-verify="required" placeholder="请选择客户" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">客户名称</label>
        <div class="layui-input-inline">
            <input type="text" readonly name="addcustomName" id="addcustomName"
                   lay-verify="required" placeholder="显示客户名称，无需输入"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">回访内容</label>
        <div class="layui-input-block">
            <textarea type="text" name="visitContent" placeholder="" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea type="text" name="remark" placeholder="" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" align="center">
            <button type="submit" class="layui-btn" id="addVisitButton" lay-submit="" lay-filter="addVisitFilter">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-normal">重置</button>
        </div>
    </div>
</form>
<!--修改表单-->
<form class="layui-form" action="" id="updateVisitForm" lay-filter="updateVisitFormFilter"
      style="display: none;margin-right: 40px;margin-top: 20px">
    <!--修改人-->
    <input hidden th:value="${session.username}" name="updateBy">
    <input hidden name="visitId">
    <div class="layui-form-item">
        <label class="layui-form-label">客户ID</label>
        <div class="layui-input-inline">
            <input type="number" name="customId" readonly id="updateCustomTableSelect" lay-verify="required"
                   placeholder="" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">客户名称</label>
        <div class="layui-input-inline">
            <input type="text" readonly name="customName"
                   lay-verify="required" placeholder=""
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">回访内容</label>
        <div class="layui-input-block">
            <textarea type="text" name="visitContent" placeholder="" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea type="text" name="remark" placeholder="" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" align="center">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateVisitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-normal">重置</button>
        </div>
    </div>
</form>
<!--查询表单-->
<form class="layui-form" action="" style="margin-top: 10px">
    <!--    <span style="font-size: 18px;font-weight: bold;color: white;">日期区间：</span>-->
    <div class="layui-inline">
        <label class="layui-form-label">日期区间</label>
        <div class="layui-input-inline">
            <input type="text" name="startTime" id="startDate" placeholder="yyyy-MM-dd" autocomplete="off"
                   class="layui-input">
        </div>
        <!--        <span style="font-size: 18px;font-weight: bold;color: white;">—</span>-->
        <div class="layui-input-inline">
            <input type="text" name="endTime" id="endDate" placeholder="yyyy-MM-dd" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="selectFormfilter">查询</button>
            <button type="reset" class="layui-btn layui-btn-normal" id="myButton">重置</button>
            <button type="button" class="layui-btn " id="test5" lay-event="addExcel" style="display: none" >导入Excel</button>
            <button type="button" class="layui-btn " id="test6" lay-event="downExcel" style="display: none">导出Excel</button>
        </div>
    </div>
</form>
<body>
<table id="customTable" lay-filter="customFilter"></table>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
</body>

<script>
    //发起导出Excel异步请求
    $("#test6").click(function () {
        location.href="/visit/exportVisit"
    })
    //自定义layui组件的目录
    layui.config({
        base: '/layui/lay/modules/'
    }).extend({
        //设定组件别名
        tableSelect: 'tableSelect',
    });
    layui.use(['table', 'layer', 'jquery', 'laydate', 'form', 'tableSelect','upload'], function () {
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let form = layui.form;
        let laydate = layui.laydate;
        let tableSelect = layui.tableSelect;
        let upload = layui.upload;
        //添加客户编号选择表格
        tableSelect.render({
            elem: '#addCustomTableSelect',	//定义输入框input对象 必填
            checkedKey: 'customId', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'contact',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '联系人姓名搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '/custom/queryAll',
                cols: [
                    [
                        {type: 'radio'}
                        , {field: 'customId', title: '客户ID', align: 'center', sort: true, width: 90}
                        , {field: 'contact', title: '联系人姓名', align: 'center', width: 120}
                        , {field: 'phone', title: '手机号', align: 'center', width: 140}
                    ]
                ]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                elem.val(data.data[0].customId)
                $("#addcustomName").val(data.data[0].contact)
            }
        })
        //文件上传
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '/visit/importVisit' //上传接口
            ,auto:true // 选择文件后自动上传
            ,accept:"file"
            ,field:"file"
            ,done: function(res){
                //上传完毕回调
                if(res.code==0){
                    alert("导入成功");
                    layer.msg("导入成功");
                }
            }
            ,error: function(){
                //请求异常回调
                lay.msg("导入失败");
            }
        });

        upload.render({
            elem: '#test5' //绑定元素
            ,url: '/visit/importVisit' //上传接口
            ,auto:true // 选择文件后自动上传
            ,accept:"file"
            ,field:"file"
            ,done: function(res){
                //上传完毕回调
                if(res.code==0){
                    alert("导入成功");
                    layer.msg("导入成功");
                }
            }
            ,error: function(){
                //请求异常回调
                lay.msg("导入失败");
            }
        });
        //获取传过来的customId
        let customId = "";
        customId = [[${customId}]] + "";

        if (customId == 0) {
            document.getElementById("customTable").hidden = true
        } else {
            document.getElementById("customTable").hidden = false
            let customUrl = '/custom/selectOne?customId=' + customId
            let customTable = table.render({
                elem: '#customTable'
                , url: customUrl //数据接口
                , page: false //开启分页
                , cols: [
                    [ //表头
                        {field: 'customId', title: '客户ID', align: 'center', sort: true, width: 90}
                        , {field: 'contact', title: '联系人姓名', align: 'center', width: 120}
                        , {field: 'phone', title: '手机号', align: 'center', width: 140}
                        , {field: 'applicant', title: '申请人', align: 'center', width: 120}
                        , {field: 'customAddress', title: '邮寄地址', align: 'center', width: 120}
                        , {field: 'createBy', title: '创建人', align: 'center', width: 120}
                        , {field: 'createTime', title: '创建时间', align: 'center', width: 160}
                        , {field: 'updateBy', title: '修改人', align: 'center', width: 120}
                        , {field: 'updateTime', title: '修改时间', align: 'center', width: 160}
                        , {field: 'proxyId', title: '代理人ID', align: 'center', width: 120, hide: true}
                        , {field: 'userName', title: '代理人', align: 'center', width: 120}
                        , {field: 'remark', title: '备注', align: 'center', width: 120}
                    ]
                ]
            });
        }


        let visitUrl = '/visit/queryAll'
        //第一个实例
        let myTable = table.render({
            elem: '#demo'
            , url: visitUrl //数据接口
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , page: true //开启分页
            , cols: [
                [ //表头
                    {field: 'visitId', title: '回访ID', align: 'center', sort: true, width: 90}
                    , {field: 'visitContent', title: '回访内容', align: 'center', width: 160}
                    , {field: 'customId', title: '客户ID', align: 'center', width: 140, hide: true}
                    , {field: 'customName', title: '客户名', align: 'center', width: 100}
                    , {field: 'createBy', title: '创建人', align: 'center', width: 120}
                    , {field: 'createTime', title: '创建时间', align: 'center', width: 160}
                    , {field: 'updateBy', title: '修改人', align: 'center', width: 120}
                    , {field: 'updateTime', title: '修改时间', align: 'center', width: 160}
                    , {field: 'remark', title: '备注', align: 'center', width: 160}
                    , {fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 140}
                ]
            ]
        });

        //监听头部工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'addVisit':
                    $("#addVisitButton").attr("class", "layui-btn")
                    document.getElementById("addVisitForm").reset()
                    layer.open({
                        title: '添加',
                        type: 1,
                        // data: data,
                        area: ['800px', '550px'],
                        content: $('#addVisitForm')//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
                case 'addExcel':
                    $("#test5").click();
                    break;
                case "downExcel":
                    $("#test6").click();
                    break;
            }
        });

        //监听行工具栏事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'editVisit') {
                //弹出对话框之前，需要填充表单数据
                form.val('updateVisitFormFilter',data);
                layer.open({
                    title: '修改',
                    type: 1,
                    area: ['800px', '550px'],
                    content: $("#updateVisitForm")//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
        });

        //修改表单提交按钮事件
        form.on('submit(updateVisitFilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //提交表单数据
            $.ajax({
                url: "/visit/update",
                type: "GET",
                dataType: "JSON",
                data: data.field,
                success: function (ret) {
                    if (ret.code == 0) {
                        //关闭对话框
                        layer.closeAll();
                        //刷新表格数据
                        myTable.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        layer.msg(ret.msg, {icon: 6});
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //查询提交按钮
        form.on('submit(selectFormfilter)', function (data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                   startTime:data.field.startTime
                    ,endTime:data.field.endTime
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //重置条件查询表单，刷新table数据
        $("#myButton").click(function () {
            myTable.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    startTime:""
                    ,endTime:""
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });
        //日期
        laydate.render({
            elem: '#startDate'
        });
        laydate.render({
            elem: '#endDate'
        });

        //添加表单提交按钮事件
        form.on('submit(addVisitFilter)', function (data) {
            if (document.getElementById("addVisitButton").className != "layui-btn layui-btn-disabled") {
                //提交表单数据
                $.ajax({
                    url: "/visit/insert",
                    type: "GET",
                    dataType: "JSON",
                    data: data.field,
                    success: function (ret) {
                        if (ret.code == 0) {
                            //关闭对话框
                            layer.closeAll();
                            //刷新表格数据
                            myTable.reload({
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                            layer.msg(ret.msg, {icon: 6});
                        } else {
                            layer.msg(ret.msg, {icon: 5});
                        }
                    }
                })
                $("#addVisitButton").attr("class", "layui-btn layui-btn-disabled")
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            }else {
                return false;
            }
        });

    });
</script>

</html>